

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>菜单列表</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all">
</head>
<body>
  <div class="layui-fluid">
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md12">
        <div class="layui-card">
          <div class="layui-card-header">菜单列表</div>
          <div class="layui-card-body">

            <table class="layui-hide" id="menu-table" lay-filter="menu-table"></table>

          </div>
        </div>
      </div>
    </div>
  </div>

  <script type="text/html" id="resource-toolbar">
    <div class="layui-btn-container">
      <button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon">&#xe654;</i>添加</button>
      <button class="layui-btn layui-btn-primary layui-btn-sm" lay-event="expand"><i class="layui-icon">&#xe6b1;</i>全部展开
      </button>
      <button class="layui-btn layui-btn-primary layui-btn-sm" lay-event="fold"><i class="layui-icon">&#xe656;</i>全部折叠
      </button>
    </div>
  </script>

  <script src="/layuiadmin/layui/layui.js"></script>
  <script>
  layui.config({
    base: '/layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index', //主入口模块
    treeTable: 'treeTable/treeTable',
  }).use(['index', 'table','treeTable'], function(){
    const table = layui.table;
    const treeTable = layui.treeTable, tableId = '#menu-table';

    //方法级渲染
    const renderTable = function () {
        treeTable.render({
            method:'post',
            treeColIndex: 1,
            treeSpid: 0,
            treeIdName: 'id',
            treePidName: 'parentId',
            treeDefaultClose: true,
            elem: tableId,
            toolbar: '#resource-toolbar',
            url: '/sys-menu/list',
            cols: [
                [
                {type: 'numbers'},
                {field: 'menuName', title: '名称', width: 200},
                {
                    field: 'menuIcon', title: '图标', width: 60, align: 'center'
                    , templet: function (d) {
                        return d.menuIcon ? '<i class="layui-icon ' + d.menuIcon + '"></i>' : '';
                    }
                },
                {field: 'menuCode', title: '别名', width: 120},
                {field: 'menuHref', title: '路径'},
                {field: 'menuLevel', title: '级别'},
                {field: 'menuWeight', title: '排序', width: 60},
                {field: 'createDate', title: '创建时间', sort: true, width: 150},
                // {fixed: 'right', align: 'center', toolbar: '#resource-table-bar', title: '操作', width: 120}
                ]
            ]
        });
    };
    renderTable();

      // 表格顶部操作列
      table.on('toolbar(menu-table)', function (obj) {
          if (obj.event === 'add') {
              layer.msg('添加');
          } else if (obj.event === 'expand') {
              treeTable.expandAll(tableId);
          } else if (obj.event === 'fold') {
              treeTable.foldAll(tableId);
          }
      });

  });
  </script>
</body>
</html>
